<template>
  <div id="main">
    <h2>e安行实训平台管理系统</h2>
    <div id="con">
      <div id="login-pwd">
        <h3>账号密码登录</h3>
        <form @submit.prevent="login" >
          <input type="hidden" class="csrf_token" v-model="csrf_token" value=""/>
<!--          <input type="hidden" class="user_type" v-model="user_type" value="A" />-->
          <p>
            <input v-model="phone" type="text" required placeholder="请输入手机号" class="phone">
          </p>
          <p>
            <span id="phone-msg">{{ phoneErrorMsg }}</span>
          </p>
          <input v-model="pwd" type="password" required placeholder="请输入密码" class="phone" name="verifyCode">
          <p>
            <span id="phone-msg">{{ errorMsg }}</span>
          </p>
          <input id="submit" type="submit" value="登录">
        </form>
        <div id="links" style="justify-content: flex-end;">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { adminModel } from "@/api/admin_models";
import Cookies from "js-cookie";
import requestConfig from '@/api/config'
export default {
  data() {
    return {
      phone: '',
      password: '',
      phoneErrorMsg: '',
      errorMsg: '',
      csrf_token:'',
      user_type:''
    };
  },
   mounted() {
    //console.log('cooket:', Cookies.get('USER_NAME'))
    if (Cookies.get('USER_TYPE') == 'A') {
      location.href = requestConfig[process.env.NODE_ENV].adminPage
    }
  },
  methods: {
    login() {
      if (!(/^1\d{10}$/.test(this.phone))) {
        this.phoneErrorMsg = '请输入正确手机号';
        return;
      }
      adminModel.login(
          {
            phone: this.phone,
            pwd: this.pwd,
            csrf_token: this.csrf_token,
            user_type: this.user_type,
          },
          res => {
            console.log('登录成功');
            console.log(res.data);
            // 跳转到主页
            window.location.href = requestConfig[process.env.NODE_ENV].adminPage;
            // this.$router.push('/home');
          },
          err => {
            console.log('登录失败')
            // 进行登录逻辑
            // 使用this.phone和this.password提交登录请求

            // 清空表单数据
            this.phone = '';
            this.pwd = '';
            this.phoneErrorMsg = '';
          })
    }
  }
};
</script>

<style>
#getVerifyCode {
  width: 160px;
  float: left;
  height: 45px;
  background-color: #ff9900;
  color: #ffffff;
  border-radius: 5px;
  margin-top: 20px;
  border: none;
}

#getVerifyCode:disabled {
  background-color: #ccc;
}

form > p {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.error-msg {
  color: red;
}

#phone-msg {
  font-size: 12px;
  color: red;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
  background-size: cover;
}

* {
  margin: 0;
  padding: 0;
}

#main {
  margin: 0 auto;
  text-align: center;
  padding-top: 122px;
}

h2, h3 {
  color: rgb(40, 82, 135);
}

#login-pwd {
  width: 95%;
  max-width: 464px;
  /* min-height: 364px; */
  background-color: #ffffff;
  margin: 0 auto;
  margin-top: 15px;
  border-radius: 10px;
  padding-bottom: 20px;;
}

h3, form {
  width: 390px;
  margin: 0 auto;
}

h3 {
  text-align: left;
  padding-top: 10px;
}

input {
  width: 380px;
  height: 45px;
  margin: 0 auto;
  margin-top: 20px;
  margin-left: -5px;
  padding-left: 10px;
  font-size: 14px;
}

#submit {
  width: 390px;
  padding: 10px 0;
  background-color: #ff9900;
  color: #ffffff;
  border-radius: 5px;
  font-size: 16px;
  margin-top: 30px;
  border: none;
}

#links {
  width: 390px;
  display: flex;
  margin: 0 auto;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 30px;
  color: #666666;
}

.links-right {
  color: rgb(150, 150, 150);
  cursor: pointer;
}

.links-left > span {
  cursor: pointer;
}

.phone {
  width: 200px;
  float: left;
}
</style>